<template>
    <!-- 第二步 为 echarts 准备 Dom 区域 -->
    <div id="main" style="width: 700px;height:600px;"></div>
</template>
<script type="text/javascript">
  // 第一步 导入图表组件 echarts
  import * as echarts from 'echarts'
  export default {
           data(){
             return{
               dd:[],
               sj:[],
               jj:[]
             }
           },
      mounted() {
          // 第三步 初始化 echarts
          var myChart = echarts.init(document.getElementById('main'))
          // 第四步 准备数据和配置项
          var option1 = {
            title: {
              text: '库存比例',
              // subtext: 'Fake Data',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: []
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                // radius: '50%',
                data: [],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          // 第五步 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option1)
          this.getItemList();
      },
      methods: {
        //实现商品信息分页查询
        async getItemList() {
            var myChart = echarts.init(document.getElementById('main'))
          const {
            data: result,status:status
          } = await this.$http.get("/charts/showlist")
          console.log(result)
          console.log(result[1].title)
          var getData=[];
          // this.myChart.setOptions(this.option,true)
          for(var i=0 ;i<result.length;i++){
            this.dd[i]=result[i].title;
            this.sj[i]=result[i].pricerow;
            this.jj[i]=result[i].price;
            var obj=new Object();
            obj.name=result[i].title;
            obj.value=result[i].num;
            getData[i]=obj;
          }

         myChart.setOption({
           legend: {
           		 data: this.dd,
            },
            series: [
              {
                data: getData,
              }
            ]
                     });
           console.log(this.dd)
          this.dataname = result.title
         }
       }

  }
</script>

<style>
</style>
